<template>
  <div class="propertycenter-manage">
    <div class="header-search-box shadow">
      <sec-form
        class="pro-search"
        :searchBox="{ span: 24, style: 'text-align:right' }"
        :span="6"
        :collapseBox="{ endIndex: 8, searchBoxSpan: 24 }"
        :optionData="searchForm.optionData"
        :ruleForm="searchForm.data"
        :formData="searchForm.config"
        :hideProp="searchForm.hideProp"
        @reset="fatchData(true)"
        @submitForm="fatchData(true)"
      >
        <template v-slot:dayRange>
          <el-input placeholder="最小" class="input-with-time" v-model="searchForm.data.lessIntervalDays"> </el-input> -
          <el-input placeholder="最大" v-model="searchForm.data.intervalDays" class="input-with-time"> </el-input>
        </template>
        <template v-slot:tagCodeList>
          <el-select
            v-model="searchForm.data.tagCodeList"
            collapse-tags
            filterable
            clearable
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in searchForm.optionData.tagCodeList"
              :key="item.tagCode"
              :label="item.tagName"
              :value="item.tagCode"
            >
            </el-option>
          </el-select>
        </template>
        <!-- <template v-slot:serviceline>
          <el-cascader
            v-model="searchForm.data.serviceline"
            :options="searchForm.optionData.serviceline"
            collapse-tags="true"
            :props="searchForm.props"
            clearable
          ></el-cascader>
        </template> -->
      </sec-form>
    </div>
    <div class="scene-main tab-scene-main">
      <div class="mul-btn">
        <el-button type="primary" @click="showReport = true" icon="el-icon-plus">批量上报</el-button>
        <el-button type="primary" @click="handleNew" icon="el-icon-plus">资产上报</el-button>
        <el-button type="primary" @click="handleBatchOpt">批量操作</el-button>
        <el-button type="primary" @click="handleColumn" icon="el-icon-plus">设置列</el-button>
      </div>
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane :label="'全部'" :name="''"></el-tab-pane>
        <el-tab-pane
          v-for="(item, index) in $store.state.dictionary[100500]"
          :key="index"
          :label="item.label"
          :name="item.value.toString()"
        ></el-tab-pane>
      </el-tabs>
      <sec-table
        :loading="searchTable.loading"
        selection
        :tableData="searchTable.rows"
        :tableCol="searchTable.cols"
        ref="secTabel"
        @selectionChange="searchTableChoice"
      >
        <template v-slot:leader="{ data }">
          <el-tooltip class="item" effect="dark" v-if="data.row.leader" :content="data.row.dept2" placement="top">
            <el-button type="text">{{ data.row.leader }}</el-button>
          </el-tooltip>
        </template>

        <template v-slot:operation="{ data }">
          <el-tooltip placement="top" :disabled="data.row.canOperate == 1">
            <div slot="content">
              当前域名资产归属责任人中没有您，如需添加，请<strong style="color: #409eff">关注</strong>
            </div>
            <span style="margin: 0 5px">
              <el-button @click.native.prevent="handleView(data.row)" :disabled="data.row.canOperate == 0" type="text"
                >资产详情</el-button
              >
            </span>
          </el-tooltip>

          <el-tooltip placement="top" :disabled="data.row.canOperate == 1">
            <div slot="content">
              当前域名资产归属责任人中没有您，如需添加，请<strong style="color: #409eff">关注</strong>
            </div>
            <span style="margin: 0 5px">
              <el-button
                @click.native.prevent="evalDetail(data)"
                :disabled="data.row.canOperate == 0 || !data.row.reportId"
                type="text"
                >审计详情</el-button
              >
            </span>
          </el-tooltip>

          <el-tooltip placement="top" :disabled="data.row.canOperate == 1">
            <div slot="content">
              当前域名资产归属责任人中没有您，如需添加，请<strong style="color: #409eff">关注</strong>
            </div>
            <span style="margin: 0 5px">
              <el-button @click.native.prevent="handleOpt(data.row)" :disabled="data.row.canOperate == 0" type="text">
                操作</el-button
              >
            </span>
          </el-tooltip>

          <el-tooltip placement="top" :disabled="data.row.canOperate == 1">
            <div slot="content">
              当前域名资产归属责任人中没有您，如需添加，请<strong style="color: #409eff">关注</strong>
            </div>
            <span style="margin: 0 5px">
              <el-button
                v-if="data.row.admin == 1"
                @click.native.prevent="handleEdit(data.row.id)"
                :disabled="data.row.canOperate == 0"
                type="text"
              >
                编辑</el-button
              >
            </span>
          </el-tooltip>

          <el-button
            @click.native.prevent="handlefocus(data.row)"
            type="text"
            v-if="data.row.followVisible == 1 && data.row.followFlag == 0"
          >
            关注</el-button
          >
          <el-button
            @click.native.prevent="handleunfocus(data.row)"
            type="text"
            v-if="data.row.followVisible == 1 && data.row.followFlag == 1"
            >取消关注</el-button
          >
        </template>
      </sec-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        background
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :layout="layout"
        :total="totalSize"
      >
      </el-pagination>
    </div>

    <el-dialog
      :title="editData && Array.isArray(editData.ids) && editData.ids.length > 1 ? '批量操作' : '操作'"
      :visible.sync="opDialogVisible"
      width="50%"
    >
      <dialog-op v-if="opDialogVisible" :editData="editData" ref="opdialog"></dialog-op>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseOpDialog(false)">取 消</el-button>
        <el-button :loading="optLoading" type="primary" @click="handleCloseOpDialog(true)">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="关注" :visible.sync="focusDialogVisible" width="50%">
      <sec-form
        ref="focusDialogRef"
        :rules="focusDialog.rules"
        :ruleForm="focusDialog.data"
        :optionData="focusDialog.optionData"
        :formData="focusDialog.formData"
        labelPosition="top"
      ></sec-form>
      <el-alert
        :closable="false"
        title="点击确认，系统自动dc/邮件通知，将您添加到bp信息中，并开启资产相关操作权限"
        type="info"
      >
      </el-alert>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handlefocusCancel()">取 消</el-button>
        <el-button type="primary" @click="checkfocusSure()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="设置列" :visible.sync="designCloumnDialogVisible" width="50%">
      <sec-form
        ref="designCloumnDialogRef"
        :rules="designCloumnDialog.rules"
        :ruleForm="designCloumnDialog.ruleForm"
        :formData="designCloumnDialog.formData"
        labelPosition="top"
      >
        <template v-slot:choiceColumnList>
          <div style="text-align: left"><b>已选择字段</b>（拖动可调整字段在列表中展示顺序）</div>
          <draggable
            style="text-align: left"
            v-model="designCloumnDialog.ruleForm.columnName"
            group="“column”"
            @start="onStart"
            @end="onEnd"
          >
            <el-tag
              v-for="item in designCloumnDialog.ruleForm.columnName"
              style="margin: 0 5px; cursor: pointer; color: #454545"
              size="medium"
              :key="item.value"
              :closable="item.close"
              @close="selectColse(item)"
              type="warning"
              color="#fae0a1"
            >
              {{ item.label }}
            </el-tag>
          </draggable>
          <br />
        </template>

        <template v-slot:columnList>
          <div style="text-align: left"><b>字段</b>（点击字段可以追加到"已选择字段"区域）</div>
          <div style="text-align: left">
            <el-tag
              v-for="item in designCloumnDialog.ruleForm.notSelectName"
              style="margin: 0 7px; cursor: pointer"
              size="medium"
              :key="item.value"
              @click.native="noSelectClick(item)"
              type=""
              effect="dark"
            >
              {{ item.label }}
            </el-tag>
          </div>
        </template>
      </sec-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseColumnDialog(false)">取 消</el-button>
        <el-button type="primary" @click="handleCloseColumnDialog(true)">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog v-if="showReport" title="批量上报" :visible.sync="showReport" width="50%">
      <batchReport @cancel="showReport = false" @confirm="batchReportConfirm"></batchReport>
    </el-dialog>
  </div>
</template>

<script>
import secForm from "components/formValidate/myForm";
import secTable from "components/table/comTable";
import { paginationMixin } from "common/js/mixin";
import dialogOp from "./propertyOpDialog";
import batchReport from "./components/batchReport.vue";
import {
  assetsList,
  assetsallDomainName,
  allBusinessLineApi,
  allLeaderApi,
  allLeaderDeptApi,
  followApi,
  unfollowApi,
  dynamicselectApi,
  dynamicupdateApi,
  allDomainApi,
} from "@/api/propertyManage";
import { tagAllApi } from "api/configApi";
import Sortable from "sortablejs";
import draggable from "vuedraggable";
export default {
  inject: ["reload"],
  props: {},
  mixins: [paginationMixin],
  components: {
    secForm,
    secTable,
    dialogOp,
    draggable,
    Sortable,
    batchReport,
  },
  data() {
    return {
      optLoading: false,
      showReport: false,
      day: "",
      daySign: "",
      activeName: "",
      disabledBatchOpt: false, //全部页签下，禁用批量操作按钮
      /**
       * 查询区域
       */
      searchForm: {
        /**
         * 查询表单数据
         */

        data: {
          domainList: [], //域名
          dept2List: [], //权属部门
          scanDev: "", //资产类型
          importSystemList: [], //资产级别
          netDev: "", //访问性
          time: "",
          source: "", //资产来源
          lessIntervalDays: "", //最小间隔天数
          intervalDays: "", //最大间隔天数
          tagCodeList: [],
          domainNameList: [],
          bizLineIdList: [], //业务线
          leaderList: [],
          onlyFollowAsset: "",
        },
        optionData: {
          tagCodeList: [],
          domainNameList: [], //系统名称
          domainList: [], // 域名数据
          bizLineIdList: [],
          leaderList: [], //权属负责人
          dept2List: [], //权属部门

          // importSystemLis:[],// 资产级别待完善
        },

        /**
         * 查询表单配置
         */
        config: [
          {
            type: "select",
            multiple: true,
            filterable: true,
            clearable: true,
            allowCreate: true,
            collapseTags: true,
            label: "域名",
            prop: "domainList",
          },
          {
            type: "select",
            multiple: true,
            filterable: true,
            clearable: true,
            collapseTags: true,
            label: "系统名称",
            prop: "domainNameList",
          },
          {
            type: "select",
            filterable: true,
            multiple: true,
            collapseTags: true,
            clearable: true,
            label: "资产级别",
            prop: "importSystemList",
            option: this.$store.state.dictionary[100400],
          },

          {
            type: "slot",
            label: "资产标签",
            prop: "tagCodeList",
            // optionProps: { label: "tagName", value: "tagCode" },
          },

          {
            type: "select",
            collapseTags: true,
            clearable: true,
            multiple: true,
            filterable: true,
            label: "权属负责人",
            prop: "leaderList",
          },
          {
            type: "select",
            collapseTags: true,
            multiple: true,
            clearable: true,
            filterable: true,
            label: "权属部门",
            prop: "dept2List",
          },

          {
            type: "select",
            filterable: true,
            clearable: true,
            label: "资产类型",
            prop: "scanDev",
            option: this.$store.state.dictionary["scanDev"],
          },

          {
            type: "select",
            filterable: true,
            clearable: true,
            label: "资产来源",
            prop: "source",
            option: this.$store.state.dictionary[100100],
          },

          {
            type: "select",
            filterable: true,
            clearable: true,
            label: "访问性",
            prop: "netDev",
            option: this.$store.state.dictionary[100200],
          },

          { type: "datetimerange", filterable: true, clearable: true, label: "录入时间", prop: "time", span: 12 },

          { type: "slot", prop: "dayRange", class: "dayRange", label: "敏感间隔天", span: 6 },
          {
            type: "select",
            collapseTags: true,
            multiple: true,
            filterable: true,
            clearable: true,
            label: "业务线",
            prop: "bizLineIdList",
            span: 6,
            // optionProps: { label: "tagName", value: "tagCode" },
          },

          {
            type: "checkbox",
            prop: "onlyFollowAsset",
            label: "仅展示我关注的",
            span: 6,
            change: () => {
              this.fatchData();
            },
          },

          // { type: "text", clearable: true, disabled: false, label: "敏感间隔天", prop: "day" },
        ],
      },

      /**
       * 关注弹窗区域
       */
      focusDialog: {
        data: {
          assetId: "",
          businessLineId: "",
        },

        optionData: {
          businessLineId: [],
        },

        formData: [
          {
            type: "select",
            label: "业务线",
            filterable: true,
            clearable: true,
            prop: "businessLineId",
            labelWidth: "100px",
            span: 24,
          },
        ],

        rules: {
          businessLineId: [{ required: true, message: "请输入", trigger: "blur" }],
        },
      },

      /**
       * 设置列弹窗区域
       */
      designCloumnDialog: {
        id: "",
        columnClose: true,
        formData: [
          {
            type: "slot",
            // multiple: true,
            // filterable: true,
            label: "",
            prop: "choiceColumnList",
            // optionProps: { label: "tagName", value: "tagCode" },
          },
          {
            type: "slot",
            // multiple: true,
            // filterable: true,
            prop: "columnList",
            // optionProps: { label: "tagName", value: "tagCode" },
          },
        ],
        ruleForm: {
          focus: "",
          id: "",
          columnName: ["系统名称", "资产级别"],
          notSelectName: ["资产类型", "权属负责人"],
        },
        rules: {
          focus: [{ required: true, message: "请输入", trigger: "blur" }],
        },
      },
      /***
       * 列表区域
       */
      searchTable: {
        //加载中
        loading: false,
        /***
         * 表格列
         */
        copycols: [],
        cols: [
          // { type: "selection", width: 60, align: "center" },
          // { label: "资产ID", prop: "id", align: "center", width: 70 },
          {
            label: "系统名称",
            prop: "domainName",
            showOverflowTooltip: true,
          },
          {
            type: "link",
            label: "域名",
            prop: "domain",
            width: 200,
            //这个是element-ui el-link组件（支持link组件里面的所有属性）
            linkConfig: {
              click: ({ row, column, $index }) => {
                this.utils.$router({ path: "/evaluate/manage", query: { domain: row.domain } }, "_blank");
              },
            },
            showOverflowTooltip: false,
          },
          {
            label: "资产状态",
            prop: "status",
            align: "center",
            width: 140,
            formatter: (row, column, cellValue, index) => {
              let ss = this.$store.state.dictionary[100500].filter((e) => e.value == cellValue);
              return Array.isArray(ss) && ss.length > 0 ? ss[0].label : "";
            },
          },
          {
            label: "资产级别",
            prop: "importSystem",
            align: "center",
            width: 100,
            showOverflowTooltip: true,
            formatter: (row, column, cellValue, index) => {
              let ss = this.$store.state.dictionary[100400].filter((e) => e.value == cellValue);
              return Array.isArray(ss) && ss.length > 0 ? ss[0].label : "";
            },
          },
          {
            label: "权属负责人",
            type: "slot",
            prop: "leader",
            align: "center",
            width: 120,
            showOverflowTooltip: false,
          },
          {
            label: "录入时间",
            prop: "createTimeText",
            align: "center",
            width: 170,
            showOverflowTooltip: false,
          },
          {
            label: "资产来源",
            prop: "source",
            align: "center",
            width: 100,
            showOverflowTooltip: false,
            formatter: (row, column, cellValue, index) => {
              let ss = this.$store.state.dictionary[100100].filter((e) => e.value == cellValue);
              return Array.isArray(ss) && ss.length > 0 ? ss[0].label : "";
            },
          },
          {
            type: "link",
            label: "已处理风险",
            prop: "riskDoneNum",
            align: "center",
            width: 100,
            linkConfig: {
              click: ({ row, column, $index }) => {
                //已处理：平台中风险状态为“已忽略+不修复+已修复”
                let statuses = ["8", "9", "11"]; //8不修复、9已修复、11 已忽略
                this.utils.$router(
                  { path: "/control/risk", query: { statuses: JSON.stringify(statuses), domain: row.domain } },
                  "_blank",
                );
              },
            },
            showOverflowTooltip: false,
          },
          {
            type: "link",
            label: "待处理风险",
            prop: "riskNum",
            align: "center",
            width: 100,
            linkConfig: {
              click: ({ row, column, $index }) => {
                //待处理：平台中风险状态为“整改中+待复核”
                let statuses = ["1-4", "5"]; //1-4整改中、5待复核
                this.utils.$router(
                  { path: "/control/risk", query: { statuses: JSON.stringify(statuses), domain: row.domain } },
                  "_blank",
                );
              },
            },
            showOverflowTooltip: false,
          },

          {
            label: "资产类型",
            prop: "scanDev",
            align: "center",
            width: 100,
            showOverflowTooltip: true,
            formatter: (row, column, cellValue, index) => {
              let ss = this.$store.state.dictionary["scanDev"].filter((e) => e.value == cellValue);
              return Array.isArray(ss) && ss.length > 0 ? ss[0].label : "";
            },
          },

          {
            label: "访问性",
            prop: "netDev",
            align: "center",
            width: 100,
            showOverflowTooltip: false,
            formatter: (row, column, cellValue, index) => {
              let ss = this.$store.state.dictionary[100200].filter((e) => e.value == cellValue);
              return Array.isArray(ss) && ss.length > 0 ? ss[0].label : "";
            },
          },

          {
            label: "系统简介",
            prop: "extraData",
            align: "center",
            width: 140,
            showOverflowTooltip: false,
          },
          {
            label: "备注",
            prop: "remark1",
            align: "center",
            width: 140,
            showOverflowTooltip: false,
          },
          {
            label: "权属部门",
            prop: "dept2",
            align: "center",
            width: 100,
            showOverflowTooltip: false,
          },
          {
            label: "操作",
            fixed: "right",
            columnType: "slot",
            prop: "operation",
            width: 230,
          },
        ],
        /**
         * 表格数据
         */
        rows: [],
      },

      //批量操作弹框
      opDialogVisible: false,

      //关注弹窗
      focusDialogVisible: false,
      //设置列弹窗
      designCloumnDialogVisible: false,
      // 编辑时需要的数据
      editData: {},
      editDataSelectIds: [],
      drag: false,
    };
  },
  computed: {},
  watch: {
    //类似下拉框source改变时，根据条件禁用下拉框day，需要用watch监听，来改变data中的数据
    "searchForm.data.source": function (newVal, oldVal) {
      if (newVal == "manual") {
        this.searchForm.config.map((e) => {
          if (e.prop == "day") {
            this.searchForm.data.day = "";
            e.disabled = true;
          }
        });
      } else {
        this.searchForm.config.map((e) => {
          if (e.prop == "day") {
            e.disabled = false;
          }
        });
      }
    },
    "searchForm.data.scanDev": function (newVal, oldVal) {
      if (newVal == "data_sec_pro") {
        this.disabledBatchOpt = true;
      } else {
        this.disabledBatchOpt = false;
      }
    },
  },
  async mounted() {
    this.activeName = sessionStorage.getItem("activeName") ? sessionStorage.getItem("activeName") : "";
    if (!this.activeName) {
      this.disabledBatchOpt = true;
    }
    let tagCode = this.$route.query.tagCode;
    if (tagCode) {
      this.searchForm.data.tagCodeList = [tagCode];
      this.activeName = "0";
    }
    this.searchForm.data.status = this.activeName;
    //copy 一份原来数据
    this.searchTable.copycols = this.searchTable.cols;
    this.selectColumn();
    this.getTagCodeList();
    this.getSelectData();
    await this.fatchData();
  },
  methods: {
    //批量上报
    batchReportConfirm() {
      // this.showReport = false;
      this.fatchData();
    },
    getTagCodeList() {
      tagAllApi().then((res) => {
        this.searchForm.optionData.tagCodeList = res.data || [];
      });
    },
    getSelectData() {
      // 获取系统名称
      assetsallDomainName().then((res) => {
        this.searchForm.optionData.domainNameList = res.data.map((item) => {
          return { label: item, value: item };
        });
      });
      // 获取全量业务线
      allBusinessLineApi().then((res) => {
        this.searchForm.optionData.bizLineIdList = res.data.map((item) => {
          return { label: item.bizLineName, value: item.bizLineId };
        });
      });
      // 获取权属负责人
      allLeaderApi().then((res) => {
        this.searchForm.optionData.leaderList = res.data.map((item) => {
          return { label: item.name + "--" + item.account, value: item.account };
        });
      });
      // 获取权属部门
      allLeaderDeptApi().then((res) => {
        this.searchForm.optionData.dept2List = res.data.map((item) => {
          return { label: item, value: item };
        });
      });

      // 获取域名
      allDomainApi().then((res) => {
        this.searchForm.optionData.domainList = res.data.map((item) => {
          return { label: item, value: item };
        });
      });
    },
    // 点击更多时数据显示
    // moreClick(){
    //   // 条件搜索框显示
    //   this.searchForm.hideProp.time = false;
    //   console.log( ".....",this.searchForm.hideProp.time);
    //    this.searchForm.hideProp.dayRange = false;
    // },
    evalDetail({ row }) {
      let name = row.auditType == "auto" ? "autoEvaluateDetail" : "allEvaluateDetail";
      this.$router.push({ name, query: { id: row.reportId, assetId: row.id } });
    },
    //获取数据
    async fatchData(paginationReset) {
      //解决点击搜索或者重置的时候 改成第一页
      if (paginationReset) {
        this.paginationReset();
      }
      this.searchTable.loading = true;
      let data = Object.assign(this.searchForm.data);

      assetsList({
        pageNum: this.page,
        pageSize: this.pageSize,
        modifyTimeStart: data.time ? data.time[0] : "",
        modifyTimeEnd: data.time ? data.time[1] : "",
        offline: this.$route.query.offline ? this.$route.query.offline : "",
        ...data,
        onlyFollowAsset: data.onlyFollowAsset == true ? 1 : 0,
        status: this.activeName === "0" ? "" : this.activeName,
      }).then((res) => {
        console.log(res);
        this.searchTable.loading = false;
        this.searchTable.rows = res.data;
        this.totalSize = res.count;
      });
    },

    // table 多选选中
    searchTableChoice(e) {
      this.editDataSelectIds = e.map((e) => e.id);
    },

    //点击table分类页签
    async tabClick(e) {
      sessionStorage.setItem("activeName", e.name);
      this.searchForm.data.status = e.name;

      await this.fatchData();
    },
    // 每页显示N条
    async handleSizeChange(e) {
      this.pageSize = e;
      await this.fatchData();
    },
    //当前页改变
    async handleCurrentChange(e) {
      this.page = e;
      await this.fatchData();
    },

    // 新建
    handleNew() {
      this.$router.push({
        path: "/property/form",
        query: {},
      });
    },

    handleColumn() {
      this.designCloumnDialogVisible = true;
      console.log("column", this.designCloumnDialog.ruleForm.columnName);
    },
    // 批量操作
    handleBatchOpt() {
      this.editData.ids = this.editDataSelectIds;
      if (this.editDataSelectIds.length == 1) {
        let findItem = this.searchTable.rows.find((item) => item.id == this.editDataSelectIds[0]);
        this.editData["editTagFlag"] = findItem?.editTagFlag;
      }

      if (this.editData.ids && Array.isArray(this.editData.ids) && this.editData.ids.length > 0) {
        this.opDialogVisible = true;
        this.editData.status = this.activeName;
      } else {
        this.message.warning({ message: "请选择资产后操作" });
      }
    },
    // 详情
    handleView(row) {
      this.$router.push({
        path: "/property/detail",
        query: {
          id: row.id,
          reportId: row.reportId,
        },
      });
    },
    //操作
    handleOpt(row) {
      this.editData.ids = [row.id];
      this.editData.status = row.status;
      this.editData.editTagFlag = row.editTagFlag;
      this.opDialogVisible = true;
    },
    // 编辑
    handleEdit(id) {
      this.$router.push({
        path: "/property/form",
        query: {
          id: id,
          report: "0",
        },
      });
    },
    // 删除
    handleDel(id) {
      this.utils.$confirm(async () => {
        let res = await this.$store.dispatch("propertyManage/delete", { id: id });
        let state = this.message.state(res);
        if (!state) return;
        await this.fatchData();
      });
    },
    //关注执行逻辑
    handlefocus(row) {
      this.focusDialogVisible = true;
      this.focusDialog.data.assetId = row.id;
      //  清除数据

      // 获取全量业务线
      allBusinessLineApi().then((res) => {
        this.focusDialog.optionData.businessLineId = res.data.map((item) => {
          return { label: item.bizLineName, value: item.bizLineId };
        });
      });
    },
    //取消关注执行逻辑
    handleunfocus(row) {
      //取消关注
      unfollowApi({
        assetId: row.id,
      }).then((res) => {
        let state = this.message.state(res);
        if (!state) {
          return;
        }
        this.fatchData();
      });
    },

    //关闭批量操作弹框
    async handleCloseOpDialog(isSubmit) {
      if (isSubmit) {
        this.optLoading = true;
        //需要提交数据
        let res = await this.$refs.opdialog.submit();
        this.optLoading = false;

        if (!res) return;
        if (res.code == 0) {
          this.opDialogVisible = false;
          this.fatchData();
        }
        //如果是资产打标处理
        if (res.sign == "tag") {
          this.message.success({ message: `成功${res.data}条` });
        } else {
          let { succNums, failNums } = res.data;
          if (failNums == "0") {
            this.message.success({ message: `成功${succNums}条，失败${failNums}条` });
          } else {
            this.message.info({ message: `成功${succNums}条，失败${failNums}条` });
          }
        }
      } else {
        this.opDialogVisible = false;
      }
      return false;
    },
    checkfocusSure() {
      if (this.$refs.focusDialogRef.submitForm()) {
        //这里是提交数据
        this.handlefocusSure();
      }
    },
    // 关注操作弹框
    handlefocusSure() {
      // 执行关注操作
      let assetId = this.focusDialog.data.assetId;
      let businessLineId = this.focusDialog.data.businessLineId;
      followApi({
        businessLineId: businessLineId,
        assetId: assetId,
      }).then((res) => {
        let state = this.message.state(res);
        if (!state) {
          return;
        }
        this.focusDialogVisible = false;
        //清空数据
        this.focusDialog.data.businessLineId = "";
        // 执行搜索
        this.fatchData();
      });
    },
    // 取消关注操作弹框
    handlefocusCancel() {
      this.focusDialogVisible = false;
      this.focusDialog.data.businessLineId = "";
    },

    //开始拖拽事件
    onStart(e) {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd(e) {
      this.drag = false;
    },
    selectColse(item) {
      // 将原数组进行删除
      let index = this.designCloumnDialog.ruleForm.columnName.indexOf(item);
      this.designCloumnDialog.ruleForm.columnName.splice(index, 1);
      //添加到上面数组中
      this.designCloumnDialog.ruleForm.notSelectName.push(item);
    },
    noSelectClick(item) {
      // 将原数组进行删除
      let index = this.designCloumnDialog.ruleForm.notSelectName.indexOf(item);
      this.designCloumnDialog.ruleForm.notSelectName.splice(index, 1);
      //添加到上面数组中
      this.designCloumnDialog.ruleForm.columnName.push(item);
    },
    //执行搜索列
    selectColumn() {
      dynamicselectApi({ assetType: "" }).then((res) => {
        this.designCloumnDialog.id = res.data.id;
        // 渲染已经选择的列
        var columnNameTemp = [];
        res.data.columnName.forEach((element) => {
          let index = this.$store.state.dictionary["column"].findIndex((item, index) => {
            return item.value === element;
          });
          //console.log("aalaa", this.$store.state.dictionary["column"][index].value);
          if (index != -1) {
            columnNameTemp.push(this.$store.state.dictionary["column"][index]);
          }
        });
        this.designCloumnDialog.ruleForm.columnName = columnNameTemp;
        // 渲染未选择的列
        var notSelectNameTemp = [];
        res.data.notSelectName.forEach((element) => {
          let index = this.$store.state.dictionary["column"].findIndex((item, index) => {
            return item.value === element;
          });
          if (index != -1) {
            notSelectNameTemp.push(this.$store.state.dictionary["column"][index]);
          }
        });

        this.designCloumnDialog.ruleForm.notSelectName = notSelectNameTemp;

        // 控制表格中的显示
        var cols = [];
        // 取出操作

        var operation = this.searchTable.copycols[this.searchTable.copycols.length - 1];

        this.designCloumnDialog.ruleForm.columnName.forEach((element) => {
          let index = this.searchTable.copycols.findIndex((item) => {
            return item.prop === element.value;
          });
          if (index != -1) {
            cols.push(this.searchTable.copycols[index]);
          }
        });
        cols.push(operation);
        this.searchTable.cols = cols;
      });
    },

    //执行更新列
    updateColumn() {
      let columnName = this.designCloumnDialog.ruleForm.columnName.map((item) => {
        return item.value;
      });
      dynamicupdateApi({
        id: this.designCloumnDialog.id,
        columnName: columnName,
        assetType: "",
      }).then((res) => {
        let state = this.message.state(res);
        if (!state) {
          return;
        }
        this.selectColumn();
      });
    },
    handleCloseColumnDialog(isSubmit) {
      if (isSubmit) {
        this.updateColumn();
        this.reload();
        //this.selectColumn();
        this.designCloumnDialogVisible = false;
      } else {
        this.designCloumnDialogVisible = false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .dayRange .el-form-item__content {
  text-align: left;
}
.input-with-time {
  width: 80px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
  color: #fae0a1;
}
/*被拖拽对象的样式*/
.item {
  padding: 6px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
}
/*选中样式*/
.chosen {
  border: solid 1px #3089dc !important;
}
.textStyle {
  text-align: left;
  font-family: "宋体";
  font-size: 5px;
  border: solid 1px #454545 !important;
}
</style>
